<template>
  <div>
    <div class="roder-details">
      <a-tabs @change="changeTypeID">
        <a-tab-pane key="1" tab="定制项">
          <a-card>
            <div class="info" style="width:100%">
              <div style="width: 30%;float: left">
                <div class="table-page-search-wrapper">
                  <a-form layout="inline">
                    <a-row :gutter="24">

                      <a-col :md="20" :sm="12">
                        <a-form-item>
                          <span>定制项：</span>
                          <select v-model:value="mymodule">
                            <option v-for="(item,index) in xiala" :value="item" :key="index">
                              {{ item.parameter }}
                            </option>
                          </select>

                        </a-form-item>
                      </a-col>

                    </a-row>
                  </a-form>
                </div>

                <h3 class="title">{{ mymodule.parameter }}</h3>
                <table style="width: 100%">
                  <tr v-for="(item,key) in mymodule.categoryInfos" :key="item.id">
                    <td><span>{{ item.categoryName }}</span></td>
                    <td>
                      <!--<span v-if="item.isSet=='1'" style="color:#f1b346">已设置</span>-->
                      <span @click="categoryDetailFunc(item.id)"
                            style="color:#f1b346">设置加价</span>
                    </td>
                  </tr>
                </table>

              </div>

              <!--参数详情-->
              <div style="width: 70%;float: right">
                <div class="info" v-show="cateDetail!=null">
                  <h3 class="title">参数详情</h3>
                  <div style="float:left;" v-if="cateDetail!=null">
                    <img v-if="cateDetail.img!=null" style="width: 100px;height: 150px;"
                         :src="cateDetail.img">
                    <img v-if="cateDetail.img==null" style="width: 100px;height: 150px;"
                         src="../../assets/u11407.jpg">
                  </div>

                  <div style="float: left;margin-left: 20px;" v-if="cateDetail!=null">
                    <table style="width: 100%;">
                      <tr style="margin-bottom: 20px">
                        <td>工艺类型</td>
                        <td style="color:#f1b346">{{ cateDetail.categoryName }}</td>
                      </tr>
                      <tr style="margin-bottom: 20px">
                        <td>编号</td>
                        <td style="color:#f1b346">{{ cateDetail.categoryCode }}</td>
                      </tr>
                      <tr style="margin-bottom: 20px">
                        <td>添加时间</td>
                        <td style="color:#f1b346">{{ cateDetail.createTime }}</td>
                      </tr>
                      <!--<tr style="margin-bottom: 20px">
                        <td>售价</td>
                        <td style="color:#f1b346">{{cateDetail.teamprice2}}</td>
                      </tr>-->
                      <tr>
                        <td>成本</td>
                        <td>
                          <span v-if="cateDetail.teamPrice1!='0'">{{ cateDetail.teamPrice1 }}</span>
                          <a-input-number min="0" placeholder="填写成本" v-model="dingzhiPrice"></a-input-number>
                        </td>
                      </tr>
                    </table>
                    <a-button @click="savePriceFunc(cateDetail.categoryCode)" type="primary">保存</a-button>
                  </div>
                </div>
              </div>
            </div>

          </a-card>
        </a-tab-pane>

        <!--*****************************************************绣字工艺***************************************-->
        <a-tab-pane key="2" tab="绣字工艺">
          <div class="info">
            <a-card>
              <div class="info" style="width:100%">
                <div style="width: 30%;float: left">
                  <!--<div class="table-page-search-wrapper">
                    <a-form layout="inline">
                      <a-row :gutter="24">

                        <a-col :md="12" :sm="12">
                          <a-form-item>
                            <a-input v-model="dingzhiCode" placeholder="请输入定制项编号"></a-input>
                          </a-form-item>
                        </a-col>

                        <a-col :md="6" :sm="8">
                        <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                          <a-button @click="listXiuziHandlerFunc(dingzhiCode)" type="primary">查询</a-button>
                        </span>
                        </a-col>

                      </a-row>
                    </a-form>
                  </div>-->

                  <h3 class="title">参数列表</h3>
                  <table style="width: 100%">
                    <tr>
                      <td><span>绣字工艺</span></td>
                      <td><span @click="XIUZITYPE=2" style="color:#f1b346">设置成本</span></td>
                    </tr>
                    <tr>
                      <td><span>文字</span></td>
                      <td><span @click="XIUZITYPE=3" style="color:#f1b346">设置成本</span></td>
                    </tr>

                    <tr>
                      <td><span>图片</span></td>
                      <td><span @click="XIUZITYPE=4" style="color:#f1b346">设置成本</span></td>
                    </tr>

                    <tr>
                      <td><span>自定义图片</span></td>
                      <td><span @click="XIUZITYPE=5" style="color:#f1b346">设置成本</span></td>
                    </tr>
                  </table>

                  <!--<h3 class="title">绣字高度</h3>
                  <table style="width: 100%">
                    <tr v-for="(item,key) in heightList" :key="item.id">
                      <td><span>{{item.embroideredType}}</span></td>
                      <td>
                        &lt;!&ndash;<span v-if="item.isSet=='1'" style="color:#f1b346">已设置</span>&ndash;&gt;
                        <span @click="xiuxiDetailFunc(item.id),XIUZITYPE=0"
                              style="color:#f1b346">设置成本</span>
                      </td>
                    </tr>
                  </table>-->

                  <!--<h3 class="title">绣字部位</h3>
                  <table style="width: 100%">
                    <tr v-for="(item,key) in locationList" :key="item.id">
                      <td><span>{{item.xiuziLocaltion}}</span></td>
                      <td>
                        &lt;!&ndash;<span v-if="item.isSet=='1'" style="color:#f1b346">已设置</span>&ndash;&gt;
                        <span @click="locationDetailFunc(item.id),XIUZITYPE=1"
                              style="color:#f1b346">设置成本</span>
                      </td>
                    </tr>
                  </table>-->
                </div>

                <!--参数详情-->
                <div style="width: 70%;float: right">
                  <div class="info">
                    <h3 class="title">参数详情</h3>
                    <div style="float:left;">
                      <!--<img v-if="cateDetail.img!=null" style="width: 100px;height: 150px;"
                           :src="cateDetail.img">-->
                      <img style="width: 100px;height: 150px;"
                           src="../../assets/u11407.jpg">
                    </div>

                    <!--绣字工艺-->
                    <div style="float: left;margin-left: 20px;">
                      <table style="width: 100%;">
                        <tr style="margin-bottom: 20px">
                          <td>参数名称</td>
                          <td v-if="XIUZITYPE==2" style="color:#f1b346">绣字工艺</td>
                          <td v-if="XIUZITYPE==3" style="color:#f1b346">文字</td>
                          <td v-if="XIUZITYPE==4" style="color:#f1b346">图片</td>
                          <td v-if="XIUZITYPE==5" style="color:#f1b346">自定义图片</td>
                        </tr>
                        <tr>
                          <td>成本</td>
                          <td>
                            <a-input-number min="0" placeholder="填写成本" v-model="dingzhiPrice"></a-input-number>
                          </td>
                        </tr>
                      </table>
                      <!--<a-button @click="saveurgentFunc(1,2,'绣字工艺')" type="primary">
                        保存
                      </a-button>-->
                      <a-button v-if="XIUZITYPE==2" @click="saveurgentFunc(1,2,'绣字工艺')" type="primary">
                        保存
                      </a-button>
                      <a-button v-if="XIUZITYPE==3" @click="saveurgentFunc(2,2,'文字')" type="primary">
                        保存
                      </a-button>
                      <a-button v-if="XIUZITYPE==4" @click="saveurgentFunc(3,2,'图片')" type="primary">
                        保存
                      </a-button>
                      <a-button v-if="XIUZITYPE==5" @click="saveurgentFunc(4,2,'自定义图片')" type="primary">
                        保存
                      </a-button>
                    </div>

                    <!--绣字高度-->
                    <!--<div v-if="XIUZITYPE==0" style="float: left;margin-left: 20px;">
                      <table style="width: 100%;">
                        <tr style="margin-bottom: 20px">
                          <td>参数名称</td>
                          <td style="color:#f1b346">{{heightDetail.embroideredType}}</td>
                        </tr>
                        <tr style="margin-bottom: 20px">
                          <td>绣字高度</td>
                          <td style="color:#f1b346">{{heightDetail.embroideredHeight}}厘米</td>
                        </tr>
                        <tr style="margin-bottom: 20px">
                          <td>添加时间</td>
                          <td style="color:#f1b346">{{heightDetail.createTime}}</td>
                        </tr>
                        &lt;!&ndash;<tr style="margin-bottom: 20px">
                          <td>售价</td>
                          <td style="color:#f1b346">{{heightDetail.costPrice}}</td>
                        </tr>&ndash;&gt;
                        <tr>
                          <td>成本</td>
                          <td>
                            &lt;!&ndash;<span v-if="cateDetail.teamPrice1!='0'">{{cateDetail.teamPrice1}}</span>&ndash;&gt;
                            <a-input-number min="0" placeholder="填写成本" v-model="dingzhiPrice"></a-input-number>
                          </td>
                        </tr>
                      </table>
                      <a-button @click="saveurgentFunc(heightDetail.id,5,heightDetail.embroideredType)" type="primary">
                        保存
                      </a-button>
                    </div>-->

                    <!--绣字位置-->
                    <!--<div v-if="XIUZITYPE==1" style="float: left;margin-left: 20px;">
                      <table style="width: 100%;">
                        <tr style="margin-bottom: 20px">
                          <td>位置</td>
                          <td style="color:#f1b346">{{localDetail.xiuziLocaltion}}</td>
                        </tr>
                        &lt;!&ndash;<tr style="margin-bottom: 20px">
                          <td>绣字高度</td>
                          &lt;!&ndash;<td style="color:#f1b346">{{localDetail.embroideredHeight}}厘米</td>&ndash;&gt;
                        </tr>&ndash;&gt;
                        <tr style="margin-bottom: 20px">
                          <td>添加时间</td>
                          <td style="color:#f1b346">{{localDetail.createTime}}</td>
                        </tr>
                        &lt;!&ndash;<tr style="margin-bottom: 20px">
                          <td>售价</td>
                          <td style="color:#f1b346">{{heightDetail.costPrice}}</td>
                        </tr>&ndash;&gt;
                        <tr>
                          <td>成本</td>
                          <td>
                            &lt;!&ndash;<span v-if="cateDetail.teamPrice1!='0'">{{cateDetail.teamPrice1}}</span>&ndash;&gt;
                            <a-input-number min="0" placeholder="填写成本" v-model="dingzhiPrice"></a-input-number>
                          </td>
                        </tr>
                      </table>
                      <a-button @click="saveurgentFunc(localDetail.id,4,localDetail.xiuziLocaltion)" type="primary">
                        保存
                      </a-button>
                    </div>-->
                  </div>
                </div>
              </div>

            </a-card>
          </div>
        </a-tab-pane>

        <!--*****************************************************撞色工艺***************************************-->
        <a-tab-pane key="3" tab="撞色工艺" @change="changeTypeID(3)">
          <div class="info">
            <a-card>
              <div class="info" style="width:100%">
                <!--<div style="width: 30%;float: left">

                  &lt;!&ndash;<h3 class="title">撞色工艺</h3>
                  <table style="width: 100%">
                    <tr>
                      <td><span>{{colorDetail.contrastColorName}}</span></td>
                      <td>
                        &lt;!&ndash;<span v-if="item.isSet=='1'" style="color:#f1b346">已设置</span>&ndash;&gt;
                        &lt;!&ndash;<span v-if="item.isSet=='0'" @click="categoryDetailFunc(item.id)"
                              style="color:#f1b346">设置成本</span>&ndash;&gt;
                      </td>
                    </tr>
                  </table>&ndash;&gt;
                </div>-->

                <!--参数详情-->
                <div>
                  <div class="info">

                    <div class="table-page-search-wrapper">
                      <a-form layout="inline">
                        <a-row :gutter="24">

                          <a-col :md="8" :sm="12">
                            <!--                            <a-form-item>
                                                          <a-input v-model="dingzhiCode" placeholder="请输入定制项编号"></a-input>
                                                        </a-form-item>-->

                            <a-form-item label="撞色工艺">
                              <select
                                v-model="value1"
                                style="width:150px"
                              >
                                <option v-for="(item,index) of colorList" :key="index" :value="item">
                                  {{ item.contrastColorName }}
                                </option>
                              </select>
                            </a-form-item>

                          </a-col>

                          <!--                          <a-col :md="6" :sm="8">
                                                  <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                                                    <a-button @click="contColorFunc" type="primary">查询</a-button>
                                                  </span>
                                                    </a-col>-->

                        </a-row>
                      </a-form>
                    </div>

                    <h3 class="title">撞色工艺参数详情</h3>
                    <div style="float:left;">
                      <img v-if="value1.contrastColorImg!=null" style="width: 100px;height: 150px;"
                           :src="value1.contrastColorImg">
                      <img v-if="value1.contrastColorImg==null" style="width: 100px;height: 150px;"
                           src="../../assets/u11407.jpg">
                    </div>

                    <div style="float: left;margin-left: 20px;" v-if="value1!=null">
                      <table style="width: 100%;">
                        <tr style="margin-bottom: 20px">
                          <td>参数名称</td>
                          <td style="color:#f1b346">{{ value1.contrastColorName }}</td>
                        </tr>
                        <tr style="margin-bottom: 20px">
                          <td>编号</td>
                          <td style="color:#f1b346">{{ value1.code }}</td>
                        </tr>
                        <tr style="margin-bottom: 20px">
                          <td>添加时间</td>
                          <td style="color:#f1b346">{{ value1.createTime }}</td>
                        </tr>
                        <!--<tr style="margin-bottom: 20px">
                          <td>售价</td>
                          <td style="color:#f1b346">{{cateDetail.teamprice2}}</td>
                        </tr>-->
                        <tr>
                          <td>成本</td>
                          <td>
                            <!--<span v-if="cateDetail.teamPrice1!='0'">{{cateDetail.teamPrice1}}</span>-->
                            <a-input-number min="0" placeholder="填写成本" v-model="dingzhiPrice"></a-input-number>
                          </td>
                        </tr>
                      </table>
                      <a-button @click="saveurgentFunc(value1.id,3,value1.contrastColorName,value1)" type="primary">
                        保存
                      </a-button>
                    </div>
                  </div>
                </div>
              </div>

            </a-card>
          </div>
        </a-tab-pane>

        <!--*****************************************************返修参数***************************************-->
        <a-tab-pane key="6" tab="返修参数">
          <div class="info">
            <a-card>
              <div class="info" style="width:100%">
                <div style="width: 30%;float: left">
                  <div class="table-page-search-wrapper">
                    <!--<a-form layout="inline">
                      <a-row :gutter="24">

                        <a-col :md="12" :sm="12">
                          <a-form-item>
                            <a-input v-model="dingzhiCode" placeholder="请输入定制项编号"></a-input>
                          </a-form-item>
                        </a-col>

                        <a-col :md="6" :sm="8">
                        <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                          <a-button @click="selectSmallMotuleFunc" type="primary">查询</a-button>
                        </span>
                        </a-col>

                      </a-row>
                    </a-form>-->
                  </div>
                  <h3 class="title">返修参数</h3>
                  <table style="width: 100%">
                    <tr v-for="(item,key) in FanxiuSizelist" :key="item.id">
                      <td><span>{{ item.bodySizename }}</span></td>
                      <td>
                        <!--<span v-if="item.isSet=='1'" style="color:#f1b346">已设置</span>-->
                        <span style="color:#f1b346" @click="fanxiuDetailFunc(item.id)">设置成本</span>
                      </td>
                    </tr>
                  </table>
                </div>

                <!--参数详情-->
                <div style="width: 70%;float: right">
                  <div class="info">
                    <h3 class="title">参数详情</h3>
                    <div style="float:left;">
                      <!--<img v-if="cateDetail.img!=null" style="width: 100px;height: 150px;"
                           :src="cateDetail.img">-->
                      <img style="width: 100px;height: 150px;"
                           src="../../assets/u11407.jpg">
                    </div>

                    <div style="float: left;margin-left: 20px;">
                      <table style="width: 100%;">
                        <tr style="margin-bottom: 20px">
                          <td>参数名称</td>
                          <td style="color:#f1b346">{{ fanxiuDetail.bodySizename }}</td>
                        </tr>
                        <tr style="margin-bottom: 20px">
                          <td>编号</td>
                          <td style="color:#f1b346">{{ fanxiuDetail.code }}</td>
                        </tr>
                        <tr style="margin-bottom: 20px">
                          <td>添加时间</td>
                          <td style="color:#f1b346">{{ fanxiuDetail.createTime }}</td>
                        </tr>
                        <!--<tr style="margin-bottom: 20px">
                          <td>售价</td>
                          <td style="color:#f1b346">{{cateDetail.teamprice2}}</td>
                        </tr>-->
                        <tr>
                          <td>成本</td>
                          <td>
                            <!--<span v-if="cateDetail.teamPrice1!='0'">{{cateDetail.teamPrice1}}</span>-->
                            <a-input-number min="0" placeholder="填写成本" v-model="dingzhiPrice"></a-input-number>
                          </td>
                        </tr>
                      </table>
                      <a-button @click="saveurgentFunc(fanxiuDetail.id,6,fanxiuDetail.bodySizename)" type="primary">保存
                      </a-button>
                    </div>
                  </div>
                </div>
              </div>

            </a-card>
          </div>
        </a-tab-pane>

        <!--*****************************************************系统加急项***************************************-->
        <a-tab-pane key="7" tab="收费服务加价">
          <div class="info">
            <a-card>
              <div class="info" style="width:100%">
                <div style="width: 30%;float: left">
                  <h3 class="title">系统参数</h3>
                  <table style="width: 100%">
                    <tr v-for="(item,key) in urgentList" :key="item.id">
                      <td><span>{{ item.premiumItem }}</span></td>
                      <td>
                        <span @click="urgentDetailFunc(item.id)" style="color:#f1b346">设置成本</span>
                      </td>
                    </tr>
                  </table>
                </div>

                <!--参数详情-->
                <div style="width: 70%;float: right">
                  <div class="info">
                    <h3 class="title">参数详情</h3>
                    <div style="float:left;">
                      <img v-if="urgentDetail.image!=null" style="width: 100px;height: 150px;"
                           :src="urgentDetail.image">
                      <img v-if="urgentDetail.image==null" style="width: 100px;height: 150px;"
                           src="../../assets/u11407.jpg">
                    </div>

                    <div style="float: left;margin-left: 20px;">
                      <table style="width: 100%;">
                        <tr style="margin-bottom: 20px">
                          <td>参数名称</td>
                          <td style="color:#f1b346">{{ urgentDetail.premiumItem }}</td>
                        </tr>
                        <!--<tr style="margin-bottom: 20px">
                          <td>编号</td>
                          <td style="color:#f1b346">{{urgentDetail.categoryCode}}</td>
                        </tr>-->
                        <tr style="margin-bottom: 20px">
                          <td>添加时间</td>
                          <td style="color:#f1b346">{{ urgentDetail.createTime }}</td>
                        </tr>
                        <!--<tr style="margin-bottom: 20px">
                          <td>售价</td>
                          <td style="color:#f1b346">{{urgentDetail.teamprice2}}</td>
                        </tr>-->
                        <tr>
                          <td>成本</td>
                          <td>
                            <!--<span v-if="urgentDetail.teamPrice1!='0'">{{urgentDetail.teamPrice1}}</span>-->
                            <!--<a-input v-model="dingzhiPrice"
                                     placeholder="请填写成本"></a-input>-->
                            <a-input-number min="0" placeholder="填写成本" v-model="dingzhiPrice"></a-input-number>
                          </td>
                        </tr>
                      </table>
                      <a-button @click="saveurgentFunc(urgentDetail.id,7,urgentDetail.premiumItem)" type="primary">保存
                      </a-button>
                    </div>
                  </div>
                </div>
              </div>

            </a-card>
          </div>
        </a-tab-pane>
      </a-tabs>

      <div class="info">
        <h3 class="title">已保存的成本项</h3>
        <a-table
          ref="table"
          bordered
          size="middle"
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
          @change="handleTableChange">

                <span slot="action" slot-scope="text, record">
                  <a @click="updateChengbenFunc(record.id,record.price)">编辑</a>
                  <a-popconfirm style="margin-left: 16px" title="确定删除吗?"
                                @confirm="() => delChengbenFunc(record.id)">
                    <a type="primary">删除</a>
                  </a-popconfirm>
                </span>
        </a-table>

        <!--更新成本价格的弹框-->
        <a-modal
          title="更新成本"
          v-model:visible="visible"
          :confirm-loading="confirmLoading"
          @ok="saveUpdateChengbenPriceFunc"
        >
          <span>成本价格：</span>
          <a-input-number min="0" v-model="chengbenPrice"></a-input-number>
        </a-modal>
      </div>

    </div>

  </div>
</template>

<script>
// @ is an alias to /src
import {getAction} from "../../api/manage";
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
import {JeecgListMixin} from '@/mixins/JeecgListMixin'

export default {
  mixins: [JeecgListMixin],
  created() {
    this.listUrgentFunc()
    this.selectSmallMotuleFunc2()
    this.listFanxiuSizeFunc()
    this.listXiuziHeightFunc()
    this.listXiuziHandlerFunc()
    this.contColor2Func()
  },
  data() {
    return {
      value1: {}, // 具体选中的撞色对象
      colorList: [], // 撞色列表
      xiala: [], //定制项下拉数据
      mymodule: {}, // 选中的大定制项
      XIUZITYPE: '', // 绣字哪个详情框显示
      chengbenID: '', // 成本项的ID
      visible: false, // 修改成本弹框
      typeid: 1, // 切换标签页，查询的数据列表不同
      chengbenPrice: '', // 编辑成本的价格
      locale,
      dingzhiCode: '', //定制项编号
      dingzhiList: {}, //定制项内容及其名下的小类别列表
      cateDetail: {}, //类别详情
      dingzhiPrice: '', // 定制项设置的成本价

      FanxiuSizelist: [], //返修尺寸项列表
      fanxiuDetail: {}, //返修详情

      colorDetail: {}, // 撞色详情

      heightList: [], // 绣字高度
      heightDetail: {}, // 绣字高度详情

      locationList: [], // 绣字位置列表
      localDetail: {}, // 绣字位置详情
      url: {
        list: '/FactoryDegressionController/listChengben?systemID=' + this.$route.query.id + '&typeID=1',// 成本项列表
        delChengben: '/FactoryDegressionController/delChengben',// 删除成本项
        selectSmallMotule: '/degression/selectSmallMotule',// 查询定制项
        selectSmallMotule2: '/degression/selectSmallMotule2',// 查询定制项 下拉框模式
        categoryDetail: '/degression/categoryDetail',// 定制项下类别详情
        savePrice: '/FactoryDegressionController/savePrice',// 定制项保存
        updatePrice: '/FactoryDegressionController/updatePrice',// 更新成本
        listUrgent: '/degression/listUrgent',// 系统加急项
        urgentDetail: '/degression/urgentDetail',// 系统加急项详情
        saveurgent: '/FactoryDegressionController/saveurgent',// 系统加急项添加成本(公用，绣字也可以)

        listFanxiuSize: '/degression/listFanxiuSize',// 返修尺寸项列表
        fanxiuDetail: '/degression/fanxiuDetail',// 返修尺寸项详情


        contColor: '/degression/contColor',// 撞色工艺详情
        contColor2: '/degression/contColor2',// 撞色工艺详情 (下拉模式)

        listXiuziHeight: '/degression/listXiuziHeight',// 绣字高度列表
        xiuxiDetail: '/degression/xiuxiDetail',// 绣字高度详情

        listXiuziHandler: '/degression/listXiuziHandler',// 绣字位置列表
        locationDetail: '/degression/locationDetail',// 绣字位置详情
      },

      // 加急项
      urgentList: [],
      urgentDetail: {}, //加急项详情

      // 成本项列表
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          // sorter: true,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '成本项',
          align: "center",
          dataIndex: 'cateogryName',
          width: 120,
          // sorter: true
        },
        {
          title: '参数名称',
          align: "center",
          width: 80,
          dataIndex: 'costName',
          /*customRender: function (text) {
            if (text == '0') {
              return '个订加工'
            } else if (text == '1') {
              return '团订加工'
            } else if (text == '2') {
              return '标准码加工'
            }
          }*/
        },
        {
          title: '成本价格',
          align: "center",
          width: 100,
          dataIndex: 'price'
        },
        {
          title: '新增时间',
          align: "center",
          width: 100,
          dataIndex: 'createTime'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 100,
          scopedSlots: {customRender: 'action'}
        }

      ],
    }
  },
  computed: {
    /*rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
          },
        }),
      };
    },*/
  }
  ,
  methods: {

    /**
     * 删除已经设置的成本项
     */
    delChengbenFunc(id) {
      getAction(this.url.delChengben, {
        'id': id
      }).then(res => {
        if (res.code == 200) {
          this.$message.success('操作成功')
          this.loadData()
        } else {
          this.$message.warning('操作失败')
        }
      })
    },

    /**
     * 获取撞色的下拉列表
     */
    contColor2Func() {
      getAction(this.url.contColor2, {
        'categoryID': this.$route.query.category
      }).then(res => {
        if (res.code == 0) {
          this.colorList = res.data
        }
      })
    },

    /**
     * 查询定制项下的小模块 下拉框模式
     */
    selectSmallMotuleFunc2() {
      getAction(this.url.selectSmallMotule2, {
        'categoryid': this.$route.query.category,
      }).then(res => {
        if (res.code == '0') {
          this.xiala = res.data
        }
      })
    },
    /**
     * 查询定制项下的小模块
     */
    selectSmallMotuleFunc() {
      if (this.dingzhiCode == '') {
        // this.$message.warning("请输入定制项编号！")
        return
      } else {
        getAction(this.url.selectSmallMotule, {
          'categoryid': this.$route.query.category,
          'code': this.dingzhiCode
        }).then(res => {
          if (res.code == '0') {
            this.dingzhiList = res.data
            // this.$message.success("查询成功")
          }
        })
      }
    },

    /**
     * 定制项下类别详情
     */
    categoryDetailFunc(id) {
      getAction(this.url.categoryDetail, {
        'id': id
      }).then(res => {
        if (res.code == '0') {
          this.cateDetail = res.data
        }
      })
    },

    /**
     * 定制项保存
     */
    savePriceFunc(code) {
      if (this.cateDetail.categoryName == null || this.cateDetail.categoryName == '') {
        this.$message.warning('请选择需要设置价格的参数')
        return
      } else if (this.dingzhiPrice == null || this.dingzhiPrice == '') {
        this.$message.warning('请输入参数')
        return;
      } else {
        getAction(this.url.savePrice, {
          'systemID': this.$route.query.id,
          'systemCateID': this.$route.query.category,
          'categoryID': this.cateDetail.id,
          'categoryName': this.cateDetail.categoryName,
          'price': this.dingzhiPrice,
          'costCode': code
        }).then(res => {
          if (res.code == '0') {
            this.selectSmallMotuleFunc()
            this.$message.success("保存成功")
            this.dingzhiPrice = ''
            this.loadData()
          } else {
            this.$message.error("该定制项已设置成本，请勿重复设置")
          }
        })
      }
    },
    /**
     * 切换标签页的方法
     * @param id
     */
    changeTypeID(key) {
      this.typeid = key
      this.dingzhiCode = ''
      this.dingzhiPrice = ''
      this.url.list = '/FactoryDegressionController/listChengben?systemID=' + this.$route.query.id + '&typeID=' + key
      this.loadData()
    },

    /**
     * 打开弹窗，拿到数据ID
     * @param id
     */
    updateChengbenFunc(id, price) {
      this.visible = true
      this.chengbenID = id
      this.chengbenPrice = price
    },

    /**
     * 更新成本价的方法
     */
    saveUpdateChengbenPriceFunc() {
      getAction(this.url.updatePrice, {
        'id': this.chengbenID,
        'price': this.chengbenPrice
      }).then(res => {
        if (res.code == '0') {
          this.visible = false
          this.loadData()
          this.$message.success("操作成功");
        }
      })
    },

    // 获取系统加急项
    listUrgentFunc() {
      getAction(this.url.listUrgent, {
        'category': this.$route.query.category,
      }).then(res => {
        if (res.code == '0') {
          this.urgentList = res.data
        }
      })
    },
    /**
     * 系统加急项详情
     */
    urgentDetailFunc(id) {
      getAction(this.url.urgentDetail, {
        'id': id
      }).then(res => {
        if (res.code == '0') {
          this.urgentDetail = res.data
        }
      })
    },
    /**
     * 保存加急项等
     * @param 参数id
     * @param typeid 类型id 3撞色
     * @param name 参数名称
     * @param param 参数对象
     */
    saveurgentFunc(costid, typeid, name, param) {
      if (name == null || name == '') {
        this.$message.warning('请选择需要设置价格的参数')
        return
      } else if (this.dingzhiPrice == null || this.dingzhiPrice == '') {
        this.$message.warning('请输入价格')
        return;
      } else {
        getAction(this.url.saveurgent, {
          'systemID': this.$route.query.id,
          'systemCateID': this.$route.query.category,
          'categoryName': name,
          'price': this.dingzhiPrice,
          'costID': costid,
          'typeID': typeid,
          'costCode': typeid == 3 ? param.code : ''
        }).then(res => {
          if (res.code == '0') {
            this.selectSmallMotuleFunc()
            this.$message.success("保存成功")
            this.dingzhiPrice = ''
            this.loadData()
          } else {
            this.$message.error("该定制项已设置成本，请勿重复设置")
          }
        })
      }
    },

    /**
     * 查询返修项
     */
    listFanxiuSizeFunc() {
      getAction(this.url.listFanxiuSize, {
        'categoryID': this.$route.query.category
      }).then(res => {
        if (res.code == '0') {
          this.FanxiuSizelist = res.data
        }
      })
    },

    /**
     * 查询返修参数详情
     * @param id 返修参数ID
     */
    fanxiuDetailFunc(id) {
      getAction(this.url.fanxiuDetail, {
        'id': id
      }).then(res => {
        if (res.code == '0') {
          this.fanxiuDetail = res.data
        }
      })
    },

    /**
     * 获取撞色工艺详情
     */
    contColorFunc() {
      getAction(this.url.contColor, {
        'code': this.dingzhiCode,
        'categoryID': this.$route.query.category
      }).then(res => {
        if (res.code == '0') {
          this.colorDetail = res.data
        }
      })
    },

    /**
     * 查询绣字高度列表
     */
    listXiuziHeightFunc() {
      getAction(this.url.listXiuziHeight, {
        'categoryID': this.$route.query.category
      }).then(res => {
        if (res.code == '0') {
          this.heightList = res.data
        }
      })
    },

    /**
     * 绣字高度详情
     */
    xiuxiDetailFunc(id) {
      getAction(this.url.xiuxiDetail, {
        'id': id
      }).then(res => {
        if (res.code == '0') {
          this.heightDetail = res.data
        }
      })
    },

    /**
     * 绣字位置列表
     */
    listXiuziHandlerFunc(code) {
      getAction(this.url.listXiuziHandler, {
        'categoryID': this.$route.query.category,
        'code': code
      }).then(res => {
        if (res.code == '0') {
          this.locationList = res.data
        }
      })
    },

    /**
     * 绣字位置详情
     */
    locationDetailFunc(id) {
      getAction(this.url.locationDetail, {
        'id': id
      }).then(res => {
        if (res.code == '0') {
          this.localDetail = res.data
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.roder-details {
  width: 100%;
  margin: 0 auto;
  background: #fff;
  margin-top: 20px;
  padding: 20px 35px;

  .info {
    padding-top: 30px;
    padding-left: 26px;
    position: relative;
    min-height: 450px;


    .text11 {
      display: flex;
      margin-bottom: 20px;

      & > p {
        width: 100px;
        font-weight: 100;
        font-size: 14px;
        color: #333;

      }

      div {
        h5 {
          color: #333;
          font-size: 15px;
          font-weight: 500;

          display: block;
        }

        p {
          color: #333;
          font-size: 15px;
          font-weight: 100;

          display: block;
        }
      }
    }

    .title10 {
      color: #333;
      font-weight: 700;
      font-size: 16px;
      line-height: 16px;
      margin-bottom: 20px;
    }

    .text10 {
      display: flex;
      margin-bottom: 20px;

      & > p {
        width: 100px;
        font-weight: 100;
        font-size: 14px;
        color: #333;

      }

      div {
        span {
          color: #333;
          font-size: 15px;
          font-weight: 100;

          &.b {
            font-weight: 500;
          }

          display: block;
        }
      }
    }

    .table-css {
      position: relative;

      .bz {
        width: 447px;
        height: 63px;
        background: inherit;
        background-color: rgba(255, 221, 202, 1);
        position: absolute;
        right: 0px;
        top: -63px;
        display: flex;
        align-items: center;
        justify-content: center;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;

        p {
          width: 100%;
          color: rgb(251, 8, 8);
          font-size: 13px;
          padding-left: 10px;
          margin-bottom: 0px;
          line-height: 16px;
        }
      }
    }

    .btns {
      margin-top: 25px;
      margin-bottom: 60px;
      display: flex;

      .btn1 {

        border-width: 0px;
        width: 105px;
        height: 42px;
        background: inherit;
        background-color: rgba(81, 81, 81, 1);
        border: none;
        border-radius: 3px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
        font-weight: 500;
        font-style: normal;
        font-size: 13px;
        text-align: center;
        display: block;
        color: rgb(236, 227, 0);
        line-height: 40px;
        margin-right: 20px;
        cursor: pointer;
      }

      .btn2 {

        border-width: 0px;
        width: 105px;
        height: 42px;
        background: inherit;
        background-color: rgba(244, 244, 244, 1);
        border: none;
        border-radius: 3px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
        font-weight: 500;
        font-style: normal;
        font-size: 13px;
        text-align: center;
        display: block;
        color: rgb(104, 104, 104);
        line-height: 40px;
        margin-right: 20px;
        cursor: pointer;
      }
    }


    .price {
      color: rgb(38, 38, 38);
      font-size: 16px;

      span {
        color: rgb(215, 1, 1);
      }

      margin: 35px 0px;
    }

    .text1 {
      width: 533px;
      height: 105px;
      padding: 3px 2px 3px 2px;
      font-family: 'ArialMT', 'Arial';
      font-weight: 400;
      font-style: normal;
      font-size: 13px;
      text-decoration: none;
      letter-spacing: normal;
      color: #000000;
      vertical-align: none;
      text-align: left;
      text-transform: none;
      background-color: #f9f9f9;
      border-color: transparent;
      resize: none;
      outline: none;
      padding: 10px;
    }

    .tabs {
      .tab {
        margin-bottom: 10px;
        display: flex;

        h5 {
          width: 112px;
          padding: 2px 2px 2px 24px;
          background-color: rgba(249, 249, 249, 1);
          font-size: 15px;
          color: #333;
          display: flex;
          height: 36px;
          align-items: center;
          margin: 0px !important;
          margin-right: 6px !important;
        }

        .tab-content {
          height: 36px;
          display: flex;

          p {
            border: 1px solid rgb(242, 242, 242);
            min-width: 100px;
            height: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 15px;
            color: #333;
            font-size: 15px;
            margin-right: 6px;

            cursor: pointer;

            b {
              display: none;
              font-weight: 700;
            }

            &.active {
              color: rgb(255, 236, 112);
              font-weight: 700;
              background-color: rgb(74, 74, 74);
            }

            &:hover {
              b {
                display: block;
              }

              span {
                display: none;
              }
            }
          }
        }
      }
    }

    h3.title {
      height: 30px;
      line-height: 30px;
      position: relative;
      font-size: 16px;
      color: #333;
      font-weight: 700;
      margin-bottom: 25px;

      &:after {
        position: absolute;
        height: 100%;
        width: 5px;
        position: absolute;
        left: -25px;
        top: 0px;
        background-color: rgba(74, 74, 74, 1);
        content: "";
      }
    }

    .title2 {
      width: 112px;
      padding: 2px 2px 2px 24px;
      font-size: 15px;
      color: #333;
      display: flex;
      height: 36px;
      align-items: center;
      margin: 0px !important;
      margin-bottom: 10px !important;
    }

    .list {
      margin-bottom: 20px;

      .list-div {
        display: flex;
        flex-wrap: wrap;

        div {
          width: 33.3%;
          display: flex;
          height: 36px;
          align-items: center;

          p {
            width: 112px;
            padding: 2px 2px 2px 24px;
            background-color: rgba(249, 249, 249, 1);
            font-size: 15px;
            color: #333;
            display: flex;
            height: 36px;
            align-items: center;
            margin: 0px !important;
          }

          span {
            width: calc(100% - 112px);
            padding: 2px 2px 2px 24px;
            font-size: 15px;
            color: #333;
            display: flex;
            height: 36px;
            align-items: center;

            &.b {
              font-weight: 700;
            }
          }
        }
      }
    }
  }
}
</style>
